<!--科研成果添加-->
<template>
  <div style="background-color: white;">
    <span style="color: grey">当前位置 >> 科研成果管理 >> 科研成果录入</span>
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
             style="width: 500px;margin-left: 350px;margin-top: 50px" :rules="formRules"
    >
      <el-form-item label="成果名称" prop="aname">
        <el-input type="text" v-model="ruleForm.aname" autocomplete="off" @blur.prevent="changeAname"></el-input>
        <span v-if="this.torf === false" style="font-size: 10px;color: red">该科研成果已存在</span>
      </el-form-item>

      <el-form-item label="成果类型" prop="acategory">
        <el-input type="text" v-model="ruleForm.acategory" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="成果经费" prop="afunds">
        <el-input type="text" v-model="ruleForm.afunds" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="负责人" prop="aleader">
        <el-input type="text" v-model="ruleForm.aleader" autocomplete="off" @blur.prevent="changeAleader"></el-input>
        <span v-if="this.torf1 === false" style="font-size: 10px;color: red">该科研人员不存在</span>
      </el-form-item>

      <el-form-item label="完成单位" prop="finishdep">
        <el-input type="text" v-model="ruleForm.finishdep" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="生产状态" prop="product">
        <el-switch
            v-model="ruleForm.product"
            active-text="已生产"
            inactive-text="未生产"
            active-value="1"
            inactive-value="0">
        </el-switch>
      </el-form-item>

      <el-form-item label="经济效益" prop="benefits">
        <el-input type="text" v-model="ruleForm.benefits" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="完成时间" prop="finishtime">
        <div class="block">
          <el-date-picker v-model="ruleForm.finishtime"
                          type="date" style="width: 400px" placeholder="请选择完成时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="文件资料" prop="afiles">
        <el-upload
            class="upload-demo"
            drag
            action="http://222.21.119.252:9999/files/upload"
            multiple
            list-type="text"
            :on-success="filesUploadSuccess"
            :on-error="filesUploadError"
            :before-upload="checkFileBefore"
            style="width: 400px"
            :data=fileVO
            :limit="1"
            :on-exceed='limitCheck'
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽上传 或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              仅支持上传一个文件,且最大容量为100MB
            </div>
          </template>
        </el-upload>
      </el-form-item>


      <el-form-item label="备注" prop="remark">
        <el-input type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容" v-model="ruleForm.remark" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="commit" style="width:100%; height:100%;margin-bottom:15px;">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {UploadFilled} from "@element-plus/icons-vue";
import request from "@/utils/request";

export default {
  components: {
    UploadFilled
  },
  name: "addAchieve",
  data() {
    return {
      fileVO: {
        sort: 'achievement',
        fileName: ''
      },
      torf: true,
      torf1: true,
      loadering: true,
      ruleForm: {
        aleader: '',
        aname: ''
      },
      formRules: {
        acategory: [
          {required: true, message: '请输入成果类别', trigger: 'blur'}
        ],
        afiles: [
          {required: true, message: '请上传文件资料', trigger: 'blur'}
        ],
        afunds: [
          {required: true, message: '请输入成果经费', trigger: 'blur'}
        ],
        aleader: [
          {required: true, message: '请输入负责人', trigger: 'blur'}
        ],
        aname: [
          {required: true, message: '请输入成果名称', trigger: 'blur'}
        ],
        benefits: [
          {required: true, message: '请输入经济效益', trigger: 'blur'}
        ],
        finishdep: [
          {required: true, message: '请输入完成单位', trigger: 'blur'}
        ],
        finishtime: [
          {required: true, message: '请选择完成时间', trigger: 'blur'}
        ],
      },
    };
  },
  methods: {
    commit() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          this.$message.error("请输入必选项!")
          return
        }
        request.post("/achievement", this.ruleForm).then(res => {
          if (res.code === '200') {
            //弹出成功框
            this.$message.success("添加成功")
          } else {
            this.$message.error("添加失败!请检查表单是否填写完整")
          }
        }).catch(() => {   //防止未知bug,执行不了Controller方法直接报错
          this.$message.error("服务器错误!请联系管理员或重新尝试!");
        })
      })
    },

    changeAname() {
      if (this.ruleForm.aname === '') {
        this.torf = true;
      } else {
        request.get(`/achievement/aname/` + this.ruleForm.aname).then(res => {
          if (res.code === '200') {
            //表示不重复,可以通过
            this.torf = true;
          } else {
            //重复,不能通过
            this.torf = false;
          }
        });
      }
    },

    //Leader  负责人改变
    changeAleader() {

      if (this.ruleForm.aleader === '') {
        this.torf1 = true;
      } else {
        request.get(`/sperson/pname/` + this.ruleForm.aleader).then(res => {
          if (res.code === '200') {
            //表示没有,不能通过
            this.torf1 = false;
          } else {
            //表示有,则可以通过
            this.torf1 = true;
          }
        });
      }
    },
    //文件上传成功
    filesUploadSuccess(res) {
      this.ruleForm.afiles = res.data;
    },
    //上传之前
    checkFileBefore(file) {

      if (this.ruleForm.aname === '') {
        this.$message.error("上传文件前请先输入成功名称!");
        return false;
      }
      if (file.size / 1024 / 1024 > 100) {
        this.$message.error("文件大小不得超过100MB");
        return false;
      }

      //文件命名
      this.fileVO.fileName = this.ruleForm.aname;

    },

    limitCheck() {
      this.$message.warning('只能上传一个文件');
    },


    filesUploadError(res) {
      console.log(res);
      if (res.code === '201') {
        this.$message.error(res.data.msg);
      } else {
        this.$message.error("上传失败,请重新尝试或联系管理员");
      }
    }
  }
}
</script>

<style scoped>

</style>
